<template>
	<div class="menu-box">
		<!-- background-color="#fff" text-color="#333" active-text-color="#409EFF"   545c64-->
		<el-menu background-color="#2e3c45" text-color="#fff" active-text-color="#409EFF"
			:default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
			@select="handleSelect">
			<!-- <el-menu-item data-deep="1" index="0">
				<template slot="title">
					<i class="el-icon-data-line"></i>
					<span>概览</span>
				</template>
</el-menu-item> -->

			<!-- 循环导航 -->
			<!-- <el-menu-item index="1" @click="$router.push('/home_page')" style="padding-right: 100%;">
				<i class="el-icon-s-home"> 首页</i>
			</el-menu-item> -->
			<el-submenu data-deep="1" v-for="(group, v1_index) in shown_menus" :key="v1_index" :index="v1_index + ''"
				:data-index="v1_index">
				<template slot="title">
					<i :class="group.icon" style="color: #fff;"></i>
					<span>{{ group.title }}</span>
				</template>

				<template v-if="group.child && group.child.length">
					<template v-for="(item, v2_index) in group.child">
						<el-menu-item data-deep="2" v-if="!item.child" :key="v2_index"
							:index="v1_index + '-' + v2_index" :data-index="v1_index + '-' + v2_index">{{ item.title
							}}</el-menu-item>
						<el-submenu data-deep="2" v-else :index="v1_index + '-' + v2_index">
							<template slot="title">{{ item.title }}</template>
							<el-menu-item data-deep="3" v-for="(v3, v3_index) in item.child"
								:key="v1_index + '-' + v2_index + '-' + v3_index"
								:index="v1_index + '-' + v2_index + '-' + v3_index">
								{{ v3.title }}</el-menu-item>
						</el-submenu>
					</template>
				</template>

			</el-submenu>

			<!-- 循环导航 -->
		</el-menu>
	</div>
</template>

<script>
import {
	system_menus
} from '@/config/system-menu.js'
console.log('system_menus', system_menus)


import {
	IS_OPEN_DEV
} from '@/config/env.js'

import permission from '@/store/permission';

import {
	mapState
} from "vuex";
export default {
	name: "page-menu",
	components: {},
	data() {
		return {
			defaultActive: "0",
			defaultActive: "0-0",

			system_menus: system_menus,
			shown_menus: [],
		};
	},
	computed: {

	},
	watch: {
		$route(to, from) {
			// this.setMenuDefault();
		},
	},
	created() {
		this.handle_menus();

		let is_permission_refresh = localStorage.getItem("is_permission_refresh")
		console.log('导航权限刷新处理 is_permission_refresh = ', is_permission_refresh)
		console.log('导航权限刷新处理 路由路径 = ', this.$route.path)

		if (this.$route.path != '/login') {
			if (is_permission_refresh == 1) {
				this.showLoading(1);
				//需要刷新导航权限
				permission.query_user_permission(this.handle_permission)
			} else {
				this.setMenuDefault();
			}
		}
	},

	methods: {
		//处理菜单
		handle_menus() {
			// let is_allow_check_all_menu = false;
			let is_allow_check_all_menu = location.host.includes('localhost'); //是否允许查看所有菜单
			this.$log('路由处理前 system_menus', this.system_menus)


			if (window.admin_config && !is_allow_check_all_menu) {
				let new_menus = [];
				let closed_route_map = window.admin_config.closed_route_map || {};
				this.$log('路由配置 closed_route_map', closed_route_map)


				let level1_list = this.system_menus.filter(v => !closed_route_map[v.route]);

				level1_list.forEach(v1 => {
					let level2_list = (v1.child || []).filter(v => !closed_route_map[v.route])
					if (level2_list.length) {
						level2_list.forEach(v2 => {
							let level3_list = (v2.child || []).filter(v => !closed_route_map[v.route])
							if (level3_list.length) {
								v2.child = level3_list
							}
						})
						v1.child = level2_list
					} else {
						v1.child = null
					}
				})

				new_menus = level1_list;
				this.system_menus = new_menus
			}


			this.$log('路由处理后 system_menus', this.system_menus)
		},

		handle_permission(info) {
			if (info.status == 'success') {
				this.setMenuDefault()

			} else {

			}
			this.hideLoading()
		},


		setMenuDefault() {
			// debugger
			if (this.$route.path == '/login') {
				return
			}

			let current_route_path = this.$route.path;
			let current_route_name = this.$route.name;
			let route_path = '/' + current_route_name
			let route_path_list = []
			// console.log('current_route_path', current_route_path);
			// console.log('current_route_name', current_route_name);

			let is_limit_auth_route = localStorage.getItem('is_limit_auth_route')


			let is_allow_check_all_menu = location.host.includes('localhost'); //是否允许查看所有菜单
			// IS_OPEN_DEV != 1 
			if (!is_allow_check_all_menu && is_limit_auth_route == 1) {
				let auth_routes_map = localStorage.getItem('auth_routes_map')
				if (auth_routes_map) {
					auth_routes_map = JSON.parse(auth_routes_map)
				} else {
					auth_routes_map = {}
				}

				this.$log('auth_routes_map', auth_routes_map)

				if (current_route_path != '/login' && current_route_path != '/' && !auth_routes_map[current_route_path]) {
					alertErr('当前账户无访问权限')
					this.$router.push('/login')
					this.hideLoading()
					return
				}


				this.system_menus = this.system_menus.filter(v => auth_routes_map[v.route])

				this.system_menus.forEach((v1, v1_index) => {
					if (route_path == v1.route) {
						route_path_list = [v1_index]
					}

					if (v1.child && v1.child.length) {
						v1.child = v1.child.filter(v => auth_routes_map[v.route])
						v1.child.forEach((v2, v2_index) => {
							if (route_path == v2.route) {
								route_path_list = [v1_index, v2_index]
							}

							if (v2.child && v2.child.length) {
								v2.child = v2.child.filter(v => auth_routes_map[v.route])
								v2.child.forEach((v3, v3_index) => {
									if (route_path == v3.route) {
										route_path_list = [v1_index, v2_index, v3_index]
									}
								})
							}
						})
					}
				})
			} else {
				this.system_menus.forEach((v1, v1_index) => {
					if (route_path == v1.route) {
						route_path_list = [v1_index]
					}
					if (v1.child && v1.child.length) {
						v1.child.forEach((v2, v2_index) => {
							if (route_path == v2.route) {
								route_path_list = [v1_index, v2_index]
							}
							if (v2.child && v2.child.length) {
								v2.child.forEach((v3, v3_index) => {
									if (route_path == v3.route) {
										route_path_list = [v1_index, v2_index, v3_index]
									}
								})
							}
						})
					}
				})
			}

			// console.log('route_path_list', route_path_list)
			this.defaultActive = route_path_list.join('-')
			this.shown_menus = this.system_menus || [];


			this.$log('defaultActive', this.defaultActive)
			this.$log('defaultActive', this.defaultActive)


			this.hideLoading()
		},


		handleOpen(key, keyPath) {
			console.log("handleOpen", key, keyPath);
		},
		handleSelect(key, keyPath) {
			//key 0-2    3-5-0
			//keyPath ['0-2']  ['3', '3-5', '3-5-0']

			let index_arr = key.split("-");
			let v1_index = index_arr[0];
			let v2_index = index_arr[1];
			let v3_index = index_arr[2];
			let deep = index_arr.length;
			let route_item = {};

			if (deep == 2) {
				route_item = this.shown_menus[v1_index].child[v2_index];
			} else if (deep == 3) {
				route_item = this.shown_menus[v1_index].child[v2_index].child[v3_index];
			}

			let route = route_item.route;
			this.$log("菜单切换 key", key);
			this.$log("菜单切换 keyPath", keyPath);
			this.$log("菜单切换 route_item", route_item);
			this.$log("菜单切换 route", route);

			this.$router.push(route);
		},

		handleClose(key, keyPath) {
			console.log(key, keyPath);
		},

		root_click() {
			console.log("点击内容区, 关闭选项弹窗");
			// this.$store.commit('vuex_closePop');
			this.vuex_closePop();
		},
	},
};
</script>

<style scoped>
.el-icon-s-home {
	color: #fff;
	/* color: #606266; */
	font-weight: 600;
}

.el-dropdown-menu {
	z-index: 1000000000000000000 !important;
}
</style>
<style scoped lang="less">
/deep/.el-menu .el-menu--inline {
	display: flex;
	flex-wrap: wrap;
}

.el-submenu .el-menu-item {
	min-width: 50px;
	// font-weight: 600;
}

.menu-box {
	text-align: left;

	/deep/ .el-menu {
		background: #313133;
		border-right: 0;
		min-width: 150px;

		&>.el-menu-item {
			max-width: 35% !important;
			background-color: transparent !important;
			padding-left: 20px !important;
			margin-right: 10px;
			margin-left: 3px;
			// padding-left: 2px !important;
			// padding-right: 0 !important;
		}

		&>.el-submenu {

			&>.el-submenu__title {
				font-size: 16px !important;
				font-weight: 600;
				// padding: 0 !important;
				color: #fff;
				// padding-left: 20% !important;
			}

			&>.el-menu {
				&>.el-menu-item {
					// min-width: 150px;
					// text-align: left;
					// text-indent: 0em;
					// padding-left: 30px !important;
				}

				&>.el-submenu {
					// padding-left: 30px !important;
					// padding-left: 0 !important;

					&>.el-submenu__title {
						// padding-left: 30px !important;
					}

					&>.el-menu {
						&>.el-menu-item {
							// padding-left: 40px !important;
						}
					}
				}
			}
		}
	}
}

// .menu-item {
//   display: block;
//   height: 50px;
//   line-height: 50px;
//   padding: 10px 20px;
//   color: #666;
//   text-align: left;

//   &:hover {
//     color: #409eff;
//   }

//   &.router-link-exact-active {
//     color: #409eff;
//   }
// }</style>